<template>
	<view class="navigation-container">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-left">
				<uni-icons type="left" size="20" @click="goBack"></uni-icons>
			</view>
			<view class="navbar-title">立即导航</view>
			<view class="navbar-right">
				<uni-icons type="more-filled" size="20" @click="showMoreOptions"></uni-icons>
			</view>
		</view>
		
		<!-- 当前位置 -->
		<view class="current-location">
			<view class="location-info">
				<uni-icons type="location-filled" size="16" color="#007AFF"></uni-icons>
				<text class="location-text">当前位置：{{ currentLocation || '正在获取位置...' }}</text>
			</view>
			<view class="refresh-btn" @click="refreshLocation">
				<uni-icons type="refresh" size="16" color="#666"></uni-icons>
			</view>
		</view>
		
		<!-- 导航服务列表 -->
		<view class="navigation-services">
			<view class="service-item" @click="navigateToService('gas')">
				<view class="service-icon">
					<image src="/static/c1.png" mode="aspectFill" class="service-img"></image>
				</view>
				<view class="service-info">
					<view class="service-name">加油站导航</view>
					<view class="service-desc">查找附近加油站</view>
				</view>
				<uni-icons type="right" size="16" color="#ccc"></uni-icons>
			</view>
			
			<view class="service-item" @click="navigateToService('repair')">
				<view class="service-icon">
					<image src="/static/c2.png" mode="aspectFill" class="service-img"></image>
				</view>
				<view class="service-info">
					<view class="service-name">维修店导航</view>
					<view class="service-desc">查找附近维修店</view>
				</view>
				<uni-icons type="right" size="16" color="#ccc"></uni-icons>
			</view>
			
			<view class="service-item" @click="navigateToService('wash')">
				<view class="service-icon">
					<image src="/static/c3.png" mode="aspectFill" class="service-img"></image>
				</view>
				<view class="service-info">
					<view class="service-name">洗车店导航</view>
					<view class="service-desc">查找附近洗车店</view>
				</view>
				<uni-icons type="right" size="16" color="#ccc"></uni-icons>
			</view>
			
			<view class="service-item" @click="navigateToService('parking')">
				<view class="service-icon">
					<image src="/static/c4.png" mode="aspectFill" class="service-img"></image>
				</view>
				<view class="service-info">
					<view class="service-name">停车场导航</view>
					<view class="service-desc">查找附近停车场</view>
				</view>
				<uni-icons type="right" size="16" color="#ccc"></uni-icons>
			</view>
		</view>
		
		<!-- 最近导航记录 -->
		<view class="recent-navigation">
			<view class="section-title">最近导航</view>
			<view class="recent-list">
				<view 
					class="recent-item" 
					v-for="(item, index) in recentNavigations" 
					:key="index"
					@click="repeatNavigation(item)"
				>
					<view class="recent-icon">
						<uni-icons :type="item.icon" size="16" color="#007AFF"></uni-icons>
					</view>
					<view class="recent-info">
						<view class="recent-name">{{ item.name }}</view>
						<view class="recent-address">{{ item.address }}</view>
					</view>
					<view class="recent-time">{{ item.time }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue';
	
	export default {
		components: { 
			uniIcons
		},
		data() {
			return {
				currentLocation: '',
				recentNavigations: [
					{
						name: '中国石油加油站',
						address: '山阳区人民中路32号',
						time: '2小时前',
						icon: 'location-filled',
						type: 'gas'
					},
					{
						name: '汽车维修中心',
						address: '解放区建设路128号',
						time: '昨天',
						icon: 'settings-filled',
						type: 'repair'
					},
					{
						name: '专业洗车店',
						address: '中站区跃进路56号',
						time: '3天前',
						icon: 'water-filled',
						type: 'wash'
					}
				]
			};
		},
		onLoad() {
			this.getCurrentLocation();
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 显示更多选项
			showMoreOptions() {
				uni.showActionSheet({
					itemList: ['设置', '关于', '帮助'],
					success: (res) => {
						console.log('选择了:', res.tapIndex);
					}
				});
			},
			
			// 获取当前位置
			async getCurrentLocation() {
				try {
					uni.showLoading({ title: '定位中...' });
					const result = await new Promise((resolve, reject) => {
						uni.getLocation({
							type: 'gcj02',
							success: (res) => {
								resolve({
									success: true,
									data: {
										latitude: res.latitude,
										longitude: res.longitude
									}
								});
							},
							fail: (err) => {
								reject({
									success: false,
									message: '获取位置失败',
									error: err
								});
							}
						});
					});
					
					if (result.success) {
						this.currentLocation = '河南省焦作市山阳区';
						uni.hideLoading();
					}
				} catch (error) {
					console.error('定位失败:', error);
					this.currentLocation = '定位失败，请重试';
					uni.hideLoading();
					uni.showToast({
						title: '定位失败，请检查权限',
						icon: 'none'
					});
				}
			},
			
			// 刷新位置
			refreshLocation() {
				this.getCurrentLocation();
			},
			
			// 导航到服务
			navigateToService(type) {
				const serviceMap = {
					gas: '加油站导航',
					repair: '维修店导航',
					wash: '洗车店导航',
					parking: '停车场导航'
				};
				
				uni.showToast({
					title: `正在开发${serviceMap[type]}功能`,
					icon: 'none'
				});
			},
			
			// 重复导航
			repeatNavigation(item) {
				uni.showToast({
					title: `正在导航到${item.name}`,
					icon: 'none'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navigation-container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	// 自定义导航栏
	.custom-navbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 44px 16px 12px 16px;
		background-color: #ffffff;
		border-bottom: 1px solid #f0f0f0;
		
		.navbar-left {
			width: 40px;
		}
		
		.navbar-title {
			font-size: 18px;
			font-weight: bold;
			color: #333333;
		}
		
		.navbar-right {
			width: 40px;
			display: flex;
			justify-content: flex-end;
		}
	}
	
	// 当前位置
	.current-location {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16px;
		background-color: #ffffff;
		margin-bottom: 12px;
		
		.location-info {
			display: flex;
			align-items: center;
			gap: 8px;
			flex: 1;
			
			.location-text {
				font-size: 14px;
				color: #333333;
			}
		}
		
		.refresh-btn {
			padding: 8px;
		}
	}
	
	// 导航服务列表
	.navigation-services {
		background-color: #ffffff;
		margin-bottom: 12px;
		
		.service-item {
			display: flex;
			align-items: center;
			padding: 16px;
			border-bottom: 1px solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			.service-icon {
				width: 48px;
				height: 48px;
				margin-right: 12px;
				
				.service-img {
					width: 100%;
					height: 100%;
					border-radius: 8px;
				}
			}
			
			.service-info {
				flex: 1;
				
				.service-name {
					font-size: 16px;
					font-weight: bold;
					color: #333333;
					margin-bottom: 4px;
				}
				
				.service-desc {
					font-size: 12px;
					color: #999999;
				}
			}
		}
	}
	
	// 最近导航记录
	.recent-navigation {
		background-color: #ffffff;
		
		.section-title {
			padding: 16px;
			font-size: 16px;
			font-weight: bold;
			color: #333333;
			border-bottom: 1px solid #f0f0f0;
		}
		
		.recent-list {
			.recent-item {
				display: flex;
				align-items: center;
				padding: 16px;
				border-bottom: 1px solid #f0f0f0;
				
				&:last-child {
					border-bottom: none;
				}
				
				.recent-icon {
					width: 32px;
					height: 32px;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #f0f8ff;
					border-radius: 50%;
					margin-right: 12px;
				}
				
				.recent-info {
					flex: 1;
					
					.recent-name {
						font-size: 14px;
						color: #333333;
						margin-bottom: 4px;
					}
					
					.recent-address {
						font-size: 12px;
						color: #999999;
					}
				}
				
				.recent-time {
					font-size: 12px;
					color: #999999;
				}
			}
		}
	}
</style> 